<ix-modal-header [requiredRoles]="requiredRoles" [title]="title" [loading]="isLoading()"></ix-modal-header>
<mat-card>
  <mat-card-content>
    <form class="ix-form-container" [formGroup]="form" (submit)="onSubmit()">
      <div class="fieldsets">
        <ix-fieldset
          class="fieldset"
          [title]="helptext.local | translate"
        >
          <ix-explorer
            formControlName="path"
            [label]="helptext.sourcePath | translate"
            [tooltip]="helptext.sourcePathTooltip | translate"
            [required]="true"
            [multiple]="false"
            [rootNodes]="[slashRootNode]"
            [nodeProvider]="fileNodeProvider"
          ></ix-explorer>

          <ix-explorer
            formControlName="cache_path"
            [label]="helptext.cachePath | translate"
            [tooltip]="helptext.cachePathTooltip | translate"
            [multiple]="false"
            [nodeProvider]="directoriesNodeProvider"
          ></ix-explorer>
        </ix-fieldset>

        <ix-fieldset
          class="fieldset"
          [title]="helptext.remote | translate"
        >
          <ix-cloud-credentials-select
            formControlName="credentials"
            [label]="helptext.credentials | translate"
            [tooltip]="helptext.credentialsTooltip | translate"
            [filterByProviders]="[CloudSyncProviderName.Storj]"
            [required]="true"
          ></ix-cloud-credentials-select>
          @if (form.controls.bucket.enabled) {
            <ix-select
              formControlName="bucket"
              [label]="helptext.bucket | translate"
              [options]="bucketOptions$"
              [required]="true"
            ></ix-select>
          }
          @if (form.controls.bucket_input.enabled) {
            <ix-input
              formControlName="bucket_input"
              [label]="helptext.newBucket | translate"
              [tooltip]="helptext.newBucketTooltip | translate"
              [required]="true"
            ></ix-input>
          }
          @if (form.controls.folder.enabled) {
            @if (isNewBucketOptionSelected) {
              <ix-input
                formControlName="folder"
                [label]="helptext.folder | translate"
                [tooltip]="helptext.folderTooltip | translate"
                [required]="true"
              ></ix-input>
            } @else {
              <ix-explorer
                formControlName="folder"
                [rootNodes]="[slashRootNode]"
                [label]="helptext.folder | translate"
                [tooltip]="helptext.folderTooltip | translate"
                [nodeProvider]="bucketNodeProvider"
                [required]="true"
              ></ix-explorer>
            }
          }
        </ix-fieldset>
        <ix-fieldset
          class="fieldset"
          [title]="helptext.taskSettings | translate"
        >
          <ix-input
            formControlName="description"
            [label]="helptext.name | translate"
            [required]="true"
          ></ix-input>
          <ix-input
            formControlName="keep_last"
            type="number"
            [label]="helptext.keepLast | translate"
            [tooltip]="helptext.keepLastTooltip | translate"
            [required]="true"
          ></ix-input>
          <ix-input
            formControlName="password"
            type="password"
            [label]="helptext.password | translate"
            [required]="true"
          ></ix-input>
        </ix-fieldset>

        <ix-fieldset
          class="fieldset"
          [title]="helptext.control | translate"
        >
          <ix-scheduler
            formControlName="schedule"
            [label]="helptext.schedule | translate"
            [required]="true"
          ></ix-scheduler>
          <ix-checkbox
            formControlName="enabled"
            [label]="helptext.enabled | translate"
          ></ix-checkbox>
        </ix-fieldset>

        <ix-fieldset
          class="fieldset"
          [title]="helptext.advancedOptions| translate"
        >
          <ix-checkbox
            formControlName="snapshot"
            [label]="helptext.useSnapshot | translate"
            [tooltip]="helptext.useSnapshotTooltip | translate"
          ></ix-checkbox>
          <ix-checkbox
            formControlName="absolute_paths"
            [label]="helptext.absolutePaths | translate"
            [tooltip]="helptext.absolutePathsTooltip | translate"
          ></ix-checkbox>
          <ix-textarea
            formControlName="pre_script"
            [label]="helptext.preScript | translate"
            [tooltip]="helptext.preScriptTooltip | translate"
          ></ix-textarea>
          <ix-textarea
            formControlName="post_script"
            [label]="helptext.postScript | translate"
            [tooltip]="helptext.postScriptTooltip | translate"
          ></ix-textarea>
          <ix-chips
            formControlName="exclude"
            [label]="helptext.exclude | translate"
            [tooltip]="helptext.excludeTooltip | translate"
          ></ix-chips>
        </ix-fieldset>

        <ix-fieldset
          class="fieldset"
          [title]="helptext.advancedRemoteOptions | translate"
        >
          <ix-select
            formControlName="transfer_setting"
            [required]="true"
            [options]="transferSettings$"
            [label]="'Transfer Setting' | translate"
          ></ix-select>
        </ix-fieldset>
      </div>

      <ix-form-actions>
        <button
          *ixRequiresRoles="requiredRoles"
          mat-button
          type="submit"
          color="primary"
          ixTest="save"
          [disabled]="form.invalid || isLoading()"
        >
          {{ 'Save' | translate }}
        </button>
      </ix-form-actions>
    </form>
  </mat-card-content>
</mat-card>
